<template>
  <div class="my-tag">
    <slot name="left"></slot>
    <p>
      <slot></slot>
    </p>
    <slot name="right"></slot>
  </div>
</template>
<script setup lang="ts">
  import { hexToRgba } from 'g6-fn'
  import { computed } from 'vue'

  const props = defineProps({
    color: {
      type: String,
      required: true,
      validator(value: string) {
        return value.length === 7
      }
    },
    width: {
      type: Number
    }
  })
  const rgbaColor = computed(() => {
    return hexToRgba(props.color)
  })
  const textColor = rgbaColor.value.rgba
  const bgcColor = `rgba(${rgbaColor.value.red},${rgbaColor.value.green},${rgbaColor.value.blue}, 0.08)`
  const width = props?.width ? props?.width + 'px' : 'none'
</script>

<style lang="less" scoped>
  .my-tag {
    width: v-bind(width);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0 6px;
    padding: 3px 6px;
    color: v-bind(textColor);
    background-color: v-bind(bgcColor);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 6px;

    p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: break-all;
      font-weight: 400;
      font-size: 14px;
      line-height: 22px;
      user-select: none;
    }
  }
</style>
